<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
import { notice, zhengce, jiedu } from "@/api/zcgg";

defineOptions({
  name: "Demo"
});
const router = useRouter(); // 获取 router 实例
const active = ref(0);
// 公示公告
const notice_page = ref(1); // 页码
const notice_limit = ref(10); // 每页条数
const notice_list = ref([]); // 存储列表数据
const notice_loading = ref(false); // 加载状态
const notice_finished = ref(false);
const notice_refreshing = ref(false);
const notice_onLoad = async () => {
  if (notice_refreshing.value) {
    notice_page.value = 1
    notice_list.value = [];
    notice_refreshing.value = false;
  }
  notice_loading.value = true;
  const response = await notice({ page: notice_page.value, limit: notice_limit.value });
  console.log(response);
  if (response.code == 1) {
    notice_page.value++
    notice_list.value.push(...response.data.rows);
    notice_loading.value = false;
    if (notice_list.value.length >= response.data.total) {
      notice_finished.value = true;
    }
    console.log('notice_list', notice_list);
  } else {
    notice_finished.value = true;
  }
};
const notice_onRefresh = () => {
  // 清空列表数据
  notice_finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  notice_loading.value = true;
  notice_onLoad();
};

// 行业政策
const zhengce_page = ref(1); // 页码
const zhengce_limit = ref(10); // 每页条数
const zhengce_list = ref([]); // 存储列表数据
const zhengce_loading = ref(false); // 加载状态
const zhengce_finished = ref(false);
const zhengce_refreshing = ref(false);
const zhengce_onLoad = async () => {
  if (zhengce_refreshing.value) {
    zhengce_page.value = 1
    zhengce_list.value = [];
    zhengce_refreshing.value = false;
  }
  zhengce_loading.value = true;
  const response = await zhengce({ page: zhengce_page.value, limit: zhengce_limit.value });
  console.log(response);
  if (response.code == 1) {
    zhengce_page.value++
    zhengce_list.value.push(...response.data.rows);
    zhengce_loading.value = false;
    if (zhengce_list.value.length >= response.data.total) {
      zhengce_finished.value = true;
    }
    console.log('zhengce_list', zhengce_list);
  } else {
    zhengce_finished.value = true;
  }
};
const zhengce_onRefresh = () => {
  // 清空列表数据
  zhengce_finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  zhengce_loading.value = true;
  zhengce_onLoad();
};

// 政策解读
const jiedu_page = ref(1); // 页码
const jiedu_limit = ref(10); // 每页条数
const jiedu_list = ref([]); // 存储列表数据
const jiedu_loading = ref(false); // 加载状态
const jiedu_finished = ref(false);
const jiedu_refreshing = ref(false);
const jiedu_onLoad = async () => {
  if (jiedu_refreshing.value) {
    jiedu_page.value = 1
    jiedu_list.value = [];
    jiedu_refreshing.value = false;
  }
  jiedu_loading.value = true;
  const response = await jiedu({ page: jiedu_page.value, limit: jiedu_limit.value });
  console.log(response);
  if (response.code == 1) {
    jiedu_page.value++
    jiedu_list.value.push(...response.data.rows);
    jiedu_loading.value = false;
    if (jiedu_list.value.length >= response.data.total) {
      jiedu_finished.value = true;
    }
    console.log('jiedu_list', jiedu_list);
  } else {
    jiedu_finished.value = true;
  }
};
const jiedu_onRefresh = () => {
  // 清空列表数据
  jiedu_finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  jiedu_loading.value = true;
  jiedu_onLoad();
};

// 组件挂载时调用多个方法
onMounted(async () => {

});
// 跳转详情页
const goToDetail = async (id, type) => {
  console.log(id);

  router.push(`/detail/${id}/${type}`); // 路由跳转
}

</script>

<template>
  <div>
    <!-- 
    <div style="
      position: fixed;
      margin-top: 124px;
      margin-left: 24px;
      color: white;
      font-size: 24px;
      font-weight: bold;
    ">住建一码通服平台</div> -->
    <div style="">
      <img style="
      position: absolute;
      margin-top: 140px;
      margin-left: 24px;
      width: 260px;" alt="" src="~@/assets/住建一码通服务平台拷贝1.png" />
      <img class="block w-[1920px] h-[220px] mx-auto mb-[3px] pt-[0px]"
        style="border-radius: 0 0 12px 12px; /* 调整圆角大小 */" alt="" src="~@/assets/congtai.png" />
    </div>
    <van-cell-group inset style="margin-top: -48px;">
      <van-tabs v-model:active="active">
        <van-tab title="公示公告">
          <van-pull-refresh v-model="notice_refreshing" @refresh="notice_onRefresh">
            <van-list v-model:loading="notice_loading" :finished="notice_finished" finished-text="没有更多了"
              @load="notice_onLoad">
              <van-cell v-for="(item, idx) in notice_list" :key="idx" :title="item.title" :label='item.author'
                @click="goToDetail(item.id, 'notice')" class=" custom-cell">
                <template #label>
                  <div>
                    <van-row justify="space-between">
                      <van-col span="18">{{ item.author }}</van-col>
                      <van-col span="5">{{ item.pubtime?.slice(0, 10) }}</van-col>
                    </van-row>
                  </div>
                </template>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="行业政策">
          <van-pull-refresh v-model="zhengce_refreshing" @refresh="zhengce_onRefresh">
            <van-list v-model:loading="zhengce_loading" :finished="zhengce_finished" finished-text="没有更多了"
              @load="zhengce_onLoad">
              <van-cell v-for="(item, idx) in zhengce_list" :key="idx" :title="item.title" :label='item.author'
                @click="goToDetail(item.id, 'zhengce')" class="custom-cell">
                <template #label>
                  <div>
                    <van-row justify="space-between">
                      <van-col span="18">{{ item.author }}</van-col>
                      <van-col span="5">{{ item.pubtime?.slice(0, 10) }}</van-col>
                    </van-row>
                  </div>
                </template>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="政策解读">
          <van-pull-refresh v-model="jiedu_refreshing" @refresh="jiedu_onRefresh">
            <van-list v-model:loading="jiedu_loading" :finished="jiedu_finished" finished-text="没有更多了"
              @load="jiedu_onLoad">
              <van-cell v-for="(item, idx) in jiedu_list" :key="idx" :title="item.title" :label='item.author'
                @click="goToDetail(item.id, 'jiedu')" class=" custom-cell">
                <template #label>
                  <div>
                    <van-row justify="space-between">
                      <van-col span="18">{{ item.author }}</van-col>
                      <van-col span="5">{{ item.pubtime?.slice(0, 10) }}</van-col>
                    </van-row>
                  </div>
                </template>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </van-cell-group>



  </div>
</template>

<style scoped>
/* 覆盖 title 的宽度 */
/* /deep/ .custom-cell .van-cell__title {
  width: 236px; 
  flex: none;  
} */
::v-deep .custom-cell .van-cell__title,
.custom-cell .van-cell__value {
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 超出隐藏 */
  text-overflow: ellipsis;
  /* 超出用省略号表示 */
}
</style>
